<template>
  <div class="home">
    <p>{{ obj.shopname }}</p>
    <p>{{ shopname }}</p>
    <button @click="changeObj">修改obj的值</button>
  </div>
</template>

<script setup>
// @ is an alias to /src
// 引入reactive使用
import { reactive, toRef } from 'vue';
// ref定义复杂数据类型
let obj = reactive({
  msg: '信息',
  count: 10,
  shopname: '名称'
})
// 使reactive的响应式对象中的数据单独成为响应式数据,值关联
let shopname = toRef(obj, 'shopname')
// 修改的方法
let changeObj = () => {
  // 修改了数据添加.value进行修改
  shopname.value = '淘宝';
  console.log(shopname);
  console.log(obj);
}

</script>
